<template>
    <view class="pages-technician">
        <!-- <back></back> -->
        <fixed>
            <uni-nav-bar
                :fixed="false"
                :shadow="false"
                :statusBar="true"
                :onlyLeft="true"
                :color="`#fff`"
                :backgroundColor="primaryColor"
            >
                <view @tap.stop="toChooseLocation" class="map-info flex-y-center" slot="left">
                    <view class="flex-y-center c-base">
                        <i class="iconfont iconjuli mr-sm"></i>
                        <view class="map-text max-400 ellipsis">
                            {{
                                location && location.address
                                    ? location.address
                                    : isLoad
                                    ? "定位失败"
                                    : "定位中..."
                            }}
                        </view>
                        <i class="iconfont icon-down"></i>
                    </view>
                </view>
            </uni-nav-bar>
            <view class="fix-info choose fill-body rel">
                <view class="space-top abs" :style="{ background: primaryColor }"></view>
                <view class="search-info fill-base pt-lg pl-lg pr-lg pb-md abs">
                    <view class="flex-center pb-md">
                        <view class="city-info">
                            <picker
                                @change="pickerChange($event)"
                                :value="cityIndex"
                                :range="cityList"
                                range-key="title"
                            >
                                <view class="city-info flex-y-center">
                                    <view>
                                        <block v-if="cityList && cityList.length > 0">
                                            {{
                                                cityIndex === -1
                                                    ? "未知"
                                                    : cityList[cityIndex].title.length > 3
                                                    ? cityList[cityIndex].title.substring(0, 3) +
                                                      "..."
                                                    : cityList[cityIndex].title
                                            }}
                                        </block>
                                        <block v-else>请选择</block>
                                    </view>
                                    <i class="iconfont iconshaixuanxia-1 ml-sm"></i>
                                </view>
                            </picker>
                        </view>
                        <view class="flex-1">
                            <search
                                @input="toSearch"
                                type="input"
                                :keyword="param.coach_name"
                                :padding="0"
                                :radius="30"
                                backgroundColor="#F0F0F0"
                                :placeholder="'请输入' + $t('action.attendantName') + '姓名'"
                            >
                            </search>
                        </view>
                    </view>
                </view>
            </view>
        </fixed>

        <view
            class="ml-md mr-md"
            :class="[{ 'flex-warp': configInfo.coach_list_format === 2 }]"
            v-if="list.data && list.data.length > 0"
        >
            <view
                :class="[
                    {
                        'mt-md':
                            (configInfo.coach_list_format === 1 && index != 0) ||
                            configInfo.coach_list_format === 2,
                    },
                    { 'mr-md': configInfo.coach_list_format === 2 && index % 2 == 0 },
                ]"
                v-for="(item, index) in list.data"
                :key="index"
            >
                <technician-list-item
                    @comment="toShowPopup(index, 'message')"
                    @collect="toCollect(index)"
                    @order="toOrder(index)"
                    :info="item"
                >
                </technician-list-item>
            </view>
        </view>

        <!-- #ifdef H5 -->
        <load-more
            :noMore="list.current_page >= list.last_page && list.data.length > 0"
            :loading="loading"
            v-if="loading"
        >
        </load-more>
        <abnor v-if="!loading && list.data.length <= 0 && list.current_page == 1"></abnor>
        <!-- #endif -->
        <!-- #ifndef H5 -->
        <load-more
            :noMore="list.current_page >= list.last_page && list.data.length > 0 && location.lng"
            :loading="loading"
            v-if="loading"
        >
        </load-more>
        <abnor
            v-if="!loading && list.data.length <= 0 && list.current_page == 1 && location.address"
        ></abnor>
        <abnor
            @confirm="toOpenLocation"
            :tip="[{ text: '定位失败，请开启地理位置授权后刷新页面重试~', color: 0 }]"
            :button="[{ text: '开启定位', type: 'confirm' }]"
            btnSize=""
            v-if="!loading && !location.address"
        >
        </abnor>
        <!-- #endif -->

        <technician-list-popup ref="technician_list_popup"></technician-list-popup>

        <uni-popup ref="choose_city_item" type="top" :custom="true" :zIndex="999">
            <view :style="{ height: configInfo.navBarHeight + 8 + 'px' }"></view>
            <view class="choose-city-popup rel">
                <image
                    class="city-img"
                    src="https://lbqny.migugu.com/admin/anmo/technician/no_city.png"
                ></image>
                <view class="text f-paragraph c-base abs">
                    很抱歉,该城市未开通, 点击左上角切换其他城市下单服务
                </view>
                <view class="flex-between">
                    <view></view>
                    <view
                        @tap.stop="$refs.choose_city_item.close()"
                        class="item-btn flex-center f-paragraph c-title text-bold radius"
                        >知道了</view
                    >
                </view>
            </view>
        </uni-popup>

        <view class="space-max-footer"></view>
        <fix-bottom-button
            @confirm="toBack"
            :text="[{ type: 'confirm', text: pageLen > 1 ? `返回上页` : `返回首页` }]"
            bgColor="#fff"
        >
        </fix-bottom-button>
    </view>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import technicianListItem from "./components/technician-list-item.vue";
import technicianListPopup from "./components/technician-list-popup.vue";
export default {
    components: {
        technicianListItem,
        technicianListPopup,
    },
    data() {
        return {
            isLoad: false,
            options: {},
            param: {
                page: 1,
                ser_id: 0,
                coach_name: "",
            },
            list: {
                data: [],
            },
            loading: true,
            lockTap: false,
            pageLen: 1,
        };
    },
    computed: mapState({
        primaryColor: (state) => state.config.configInfo.primaryColor,
        subColor: (state) => state.config.configInfo.subColor,
        configInfo: (state) => state.config.configInfo,
        cityId: (state) => state.technician.cityId,
        cityIndex: (state) => state.technician.cityIndex,
        cityList: (state) => state.technician.cityList,
        loginType: (state) => state.user.loginType,
        userInfo: (state) => state.user.userInfo,
        location: (state) => state.user.location,
    }),
    async onLoad(options) {
        this.options = options;
        // #ifndef H5

        this.$util.showLoading();
        // #endif
        await this.initIndex();
        this.isLoad = true;
    },
    onPullDownRefresh() {
        // #ifndef APP-PLUS
        uni.showNavigationBarLoading();
        // #endif
        this.initRefresh();
        uni.stopPullDownRefresh();
    },
    onReachBottom() {
        if (this.list.current_page >= this.list.last_page || this.loading) return;
        this.param.page = this.param.page + 1;
        this.loading = true;
        this.getList();
    },
    methods: {
        ...mapActions(["getCityList"]),
        ...mapMutations(["updateUserItem", "updateTechnicianItem"]),
        async initIndex(refresh = false) {
            // #ifdef H5
            if (!refresh && this.$jweixin.isWechat()) {
                await this.$jweixin.initJssdk();
                this.$jweixin.wxReady(() => {
                    this.$jweixin.hideOptionMenu();
                });
            }
            // #endif
            this.pageLen = getCurrentPages().length;
            this.getList(this.cityList.length == 0);
        },
        initRefresh() {
            this.param.page = 1;
            this.initIndex(true);
        },
        pickerChange(e, val) {
            let ind = e.target.value;
            this.updateTechnicianItem({
                key: "cityIndex",
                val: ind,
            });
            this.updateTechnicianItem({
                key: "cityId",
                val: this.cityList[ind].id,
            });
            this.param.page = 1;
            this.getList();
        },
        toOpenLocation() {
            this.$util.checkAuth({
                type: "userLocation",
            });
            // #ifdef APP-PLUS
            uni.getSystemInfo({
                success: (sys) => {
                    if (sys.platform == "ios") {
                        plus.runtime.openURL("app-settings://");
                    } else {
                        var main = plus.android.runtimeMainActivity();
                        var Intent = plus.android.importClass("android.content.Intent");
                        //可能应该直接进入应用列表的权限设置？=> android.settings.APPLICATION_SETTINGS
                        var mIntent = new Intent("android.settings.LOCATION_SOURCE_SETTINGS");
                        main.startActivity(mIntent);
                    }
                },
            });
            // #endif
        },
        toSearch(val) {
            this.param.page = 1;
            this.param.coach_name = val;
            this.getList();
        },
        // 选择地区
        async toChooseLocation(e) {
            await this.$util.checkAuth({
                type: "userLocation",
            });

            let { lat: locaLat = "", lng: locaLng = "" } = this.location;

            let param = {};
            if (!locaLat && !locaLng) {
                // #ifdef H5
                if (this.$jweixin.isWechat()) {
                    this.$util.showLoading();
                    await this.$jweixin.wxReady2();
                    let { latitude, longitude } = await this.$jweixin.getWxLocation();
                    locaLat = latitude;
                    locaLng = longitude;
                }
                // #endif
                // #ifdef APP-PLUS
                let location = await this.$util.getBmapLocation();
                locaLat = location.lat;
                locaLng = location.lng;
                // #endif
            }

            // #ifndef MP-WEIXIN
            param = {
                latitude: locaLat,
                longitude: locaLng,
            };
            // #endif
            let [
                ,
                {
                    address = "",
                    longitude: lng,
                    latitude: lat,
                    province = "",
                    city = "",
                    district = "",
                },
            ] = await uni.chooseLocation(param);
            if (!lng) return;
            let location = {
                lng,
                lat,
                address,
                province,
                city,
                district,
            };
            this.updateUserItem({
                key: "location",
                val: location,
            });
            this.param.page = 1;
            await this.getList(true, 1);
        },
        async getList(refresh = false, change = 0) {
            let { location } = this;
            if (!location.lat || (location.lat && location.address == "定位失败")) {
                // #ifdef H5
                if (this.$jweixin.isWechat()) {
                    this.$util.showLoading();
                    // await this.$jweixin.initJssdk();
                    await this.$jweixin.wxReady2();
                    let { lat = "", lng = "" } = location;
                    if (!lat && !lng) {
                        let { latitude, longitude } = await this.$jweixin.getWxLocation();
                        lat = latitude;
                        lng = longitude;
                        location = {
                            lng,
                            lat,
                            address: "定位失败",
                            province: "",
                            city: "",
                            district: "",
                        };
                    }
                    if (lat && lng) {
                        let key = `${lat},${lng}`;
                        let data = await this.$api.base.getMapInfo({
                            location: key,
                        });
                        let { status, result } = JSON.parse(data);
                        if (status == 0) {
                            let { address, address_component } = result;
                            let { province, city, district } = address_component;
                            location = {
                                lng,
                                lat,
                                address,
                                province,
                                city,
                                district,
                            };
                        }
                    }
                }
                // #endif
                // #ifndef H5
                location = await this.$util.getBmapLocation();
                // #endif

                this.updateUserItem({
                    key: "location",
                    val: location,
                });
            }

            let { lng = 0, lat = 0 } = location;
            if (refresh) {
                await this.getCityList({
                    lng,
                    lat,
                    change,
                });
            }

            let { id: ser_id, store_id = 0 } = this.options;
            let { list: oldList, param, cityList, cityIndex, cityId: city_id } = this;

            let ind = cityList.findIndex((item) => {
                return item.id == city_id;
            });

            if (ind == -1) {
                this.$refs.choose_city_item.open();
                this.loading = false;
                this.$util.hideAll();
                this.list = {
                    data: [],
                    last_page: 1,
                    current_page: 1,
                };
                return;
            }

            city_id = ind == -1 ? 0 : city_id;
            cityIndex = ind == -1 ? 0 : ind;

            this.updateTechnicianItem({
                key: "cityIndex",
                val: cityIndex,
            });

            this.updateTechnicianItem({
                key: "cityId",
                val: city_id,
            });

            param = Object.assign({}, param, {
                ser_id,
                store_id,
                lng,
                lat,
                city_id,
            });

            let { coach_format = 1 } = this.configInfo;

            let methodModel = coach_format == 1 ? "serviceCoachList" : "typeServiceCoachList";

            let newList = await this.$api.service[methodModel](param);

            if (this.param.page == 1) {
                this.list = newList;
            } else {
                newList.data = oldList.data.concat(newList.data);
                this.list = newList;
            }
            this.loading = false;
            this.$util.hideAll();
        },
        async toShowPopup(index, key) {
            this.$refs.technician_list_popup.toShowPopup(this.list.data[index], key);
        },
        async toCollect(index) {
            let { id, is_collect, collect_num } = this.list.data[index];
            let methodModel = is_collect ? "delCollect" : "addCollect";
            await this.$api.mine[methodModel]({
                coach_id: id,
            });
            this.$util.showToast({
                title: is_collect ? "取消成功" : "收藏成功",
            });
            this.list.data[index].is_collect = is_collect == 1 ? 0 : 1;
            this.list.data[index].collect_num = is_collect == 1 ? collect_num - 1 : collect_num + 1;
        },
        // 技-师详情
        goInfo(index) {
            let { id, store = {} } = this.list.data[index];
            let { plugAuth = {} } = this.configInfo;
            this.$util.goUrl({
                url:
                    plugAuth.store && store && store.id
                        ? `/shopstore/pages/detail?id=${store.id}`
                        : `/user/pages/technician-info?id=${id}`,
            });
        },
        // 预约
        async toOrder(index) {
            let { id: coach_id, is_work = 0 } = this.list.data[index];
            if (!is_work) return;
            let { id: service_id } = this.options;
            if (this.lockTap) return;
            this.lockTap = true;
            try {
                await this.$api.order.addCar({
                    service_id,
                    coach_id,
                    num: 1,
                    is_top: 1,
                    coach_service: 1,
                });
                this.lockTap = false;
                let url = `/user/pages/order?id=${coach_id}&ser_id=${service_id}`;
                this.$util.goUrl({
                    url,
                });
            } catch (e) {
                this.lockTap = false;
            }
        },
        toBack() {
            let { pageLen } = this;
            let url = pageLen > 1 ? 1 : `/pages/service`;
            let openType = pageLen > 1 ? `navigateBack` : `reLaunch`;
            this.$util.goUrl({
                url,
                openType,
            });
        },
    },
};
</script>

<style lang="scss">
.pages-technician {
}
</style>
